<template>
  <div class="project">
    <pro-table
      ref="tableRef"
      v-model:formData="formData"
      v-model:tableData="tableData"
      row-key="id"
      :columns="columns"
      style="margin-bottom: 20px"
      :form-props="{ labelWidth: 80 }"
      :request="api.project.getProjects"
      :pagination="{ pageSizes: [10, 20, 30, 40, 50, 100] }"
    >
      <template #actions>
        <el-button type="primary" @click="onAdd">
          <SvgIcon icon-class="ic_+" style="font-size: 19px; margin-right: 5px" />新增项目
        </el-button>
      </template>
      <template #operations="{ row }">
        <el-button link type="primary" @click="onEdit(row)"> 编辑 </el-button>
        <el-button link type="primary" @click="onDelete(row)"> 删除 </el-button>
        <el-switch
          class="margin-left"
          inline-prompt
          active-text="启用"
          inactive-text="停用"
          :value="!!row.status"
          @click="onChangeStatus(row)"
        />
      </template>
    </pro-table>

    <el-dialog
      :width="700"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      v-model="isShow"
      :title="title"
      destroy-on-close
      custom-class="center-detail"
    >
      <detail is-dialog @ok="onOk" @cancel="onClose" :edit-data="editData" />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { Column, ProTable } from '@jl/element-plus';
import detail from './detail.vue';
import api from '@/api';
import { confirmAgain, messageAlert } from '@/utils';
import { messageUtil } from '@jl/element-plus/utils';

const tableRef = ref<any>();
const formData = ref<any>({ appId: process.env.VUE_APP_ID });
const editData = ref<any>({});
const tableData = ref<any>([]);
const isShow = ref(false);
const title = ref('');
const columns = computed<Column[]>(() => [
  {
    type: 'input',
    prop: 'projectName',
    label: '项目名称',
    visible: false,
    formProps: {
      placeholder: '项目编码/项目名称',
    },
  },
  {
    type: 'input',
    prop: 'projectCode',
    label: '项目编码',
    tableProps: {
      showOverflowTooltip: true,
      minWidth: 120,
    },
    formProps: {
      visible: false,
    },
  },
  {
    type: 'input',
    prop: 'projectName',
    label: '项目名称',
    formProps: {
      visible: false,
    },
    tableProps: {
      showOverflowTooltip: true,
      minWidth: 120,
    },
  },
  {
    type: 'select',
    prop: 'companyName',
    label: '所属企业名称',
    formProps: {
      visible: false,
    },
    tableProps: {
      showOverflowTooltip: true,
      minWidth: 120,
    },
  },
  {
    type: 'input',
    prop: 'provinceName',
    label: '省份',
    width: 140,
    formProps: {
      visible: false,
    },
  },
  {
    type: 'input',
    prop: 'cityName',
    label: '市级',
    width: 140,
    formProps: {
      visible: false,
    },
  },
  {
    type: 'input',
    prop: 'areaName',
    label: '区县',
    width: 140,
    formProps: {
      visible: false,
    },
  },
  {
    type: 'input',
    prop: 'createTime',
    label: '创建时间',
    width: 200,
    formProps: {
      visible: false,
    },
  },
  {
    type: 'slot',
    prop: 'operations',
    label: '操作',
    width: 240,
    formProps: {
      visible: false,
    },
    tableProps: {
      fixed: 'right',
    },
  },
  {
    type: 'select',
    prop: 'status',
    label: '状态',
    options: [
      { label: '全部', value: undefined },
      { label: '启用', value: 1 },
      { label: '停用', value: 0 },
    ],
    visible: false,
  },
]);
const onAdd = () => {
  isShow.value = true;
  title.value = '新增项目';
  editData.value = {};
};
const onEdit = (row: any) => {
  if (row && !row.status) {
    messageAlert('停用状态无法编辑', '请先启用项目', 'error');
    return;
  }
  isShow.value = true;
  title.value = '编辑项目';
  editData.value = row;
};
const onClose = () => {
  isShow.value = false;
};
const onOk = () => {
  isShow.value = false;
  tableRef.value.refresh();
};
const onDelete = async (row: any) => {
  const flag = await confirmAgain('确认删除这个项目？', '删除操作不可逆，确定是否删除？');
  if (!flag) return;
  try {
    await api.project.deleteProject({ id: row.id });
    messageUtil.success('删除成功');
    tableRef.value.refresh();
  } catch {
    messageUtil.success('该项目存在已发布的场景，请取消发布后再进行删除操作');
  }
};
const onChangeStatus = async (row: any) => {
  const changeRow = async () => {
    if (row.status) {
      await api.project.blockUpProject({ id: row.id });
    } else {
      await api.project.enableProject({ id: row.id });
    }
    messageUtil.success('切换成功');
    tableRef.value.refresh();
  };
  if (row.status) {
    const flag = await confirmAgain(
      '确认将这个项目停用？',
      '停用后该项目场景内容将下线，该项目场景将不能再调用和查看？'
    );
    if (!flag) return;
  }
  changeRow();
};
</script>

<style scoped lang="less">
.project {
  height: 100%;
  .margin-left {
    margin-left: 1rem;
  }
  .pro-table {
    :deep(.el-form-item__label) {
      font-size: 14px;
      font-weight: 400;
      color: #353535;
    }
    :deep(.actions) {
      .el-form-item__content {
        justify-content: flex-start;
      }
      .el-button:first-child {
        display: none;
      }
      .el-button {
        width: 88px;
      }
    }
  }
  :deep(.el-pagination .is-first) {
    margin-right: unset;
  }
}
</style>
